import React,{ useState,createContext } from 'react';
import { PageContainer } from '@ant-design/pro-layout';
import TestTableComponents from "@/pages/test/List/components/Table";
import { Card, Form, Input, Button, Space, Dropdown, Menu } from 'antd';
import tableData from './list.json'
import {
  DeleteOutlined,
  EditOutlined, ExportOutlined,
  ImportOutlined,
  PlusOutlined,
  SearchOutlined,
  WindowsFilled,
} from '@ant-design/icons';
import AddOrUpdate from '@/pages/test/List/components/AddOrUpdate';



// @ts-ignore
export const ShowContext = createContext();
const TestList: React.FC = () => {
  const [form] = Form.useForm();
  const [show,setShow] = useState(false);
  const [title,setTitle] = useState('新增订单');
  const btnOnClick = () => {
  };
  const columns = [
    {
      title: '订单号',
      dataIndex: 'sheet_code',
      key: 'sheet_code'
    },
    {
      title: '配送方式',
      dataIndex: 'deliver_type_name',
      key: 'deliver_type_name',
    },
    {
      title: '客户类型',
      dataIndex: 'member_category_name',
      key: 'member_category_name',
    },
    {
      title: '支付方式',
      dataIndex: 'paymontwx',
      key: 'paymontwx',
    },
    {
      title: '支付时间',
      dataIndex: 'pay_time',
      key: 'pay_time',
    },
    {
      title: '审核方式',
      dataIndex: 'achv_user_name',
      key: 'achv_user_name',
    },
    {
      title: '创建时间',
      dataIndex: 'create_time',
      key: 'create_time',
    },
    {
      title: '销售额',
      dataIndex: 'account_price',
      key: 'account_price',
    },
    {
      title: '实收金额',
      dataIndex: 'real_price',
      key: 'real_price'
    },
  ];
  const handleAdd = () =>{
    setTitle('新增订单');
    setShow(true);
  }
  const handleEdit = () =>{
    setTitle('编辑订单');
    setShow(true);
  }
  //更多操作按钮回调函数
  const handleBtnMenuClick = () =>{

  }
  //更多操作按钮
  const menu = (
    <Menu onClick={handleBtnMenuClick}>
      <Menu.Item key="import" icon={<ImportOutlined />}>导入</Menu.Item>
      <Menu.Item key="export" icon={<ExportOutlined />}>导出</Menu.Item>
    </Menu>
  );
  const btnContent = (
    <Space >
      <Button type="primary" icon={<PlusOutlined />} onClick={handleAdd}>新增</Button>
      <Button type="primary" icon={<EditOutlined />} onClick={handleEdit} className="button-color-deit">编辑</Button>
      <Button type="primary" icon={<DeleteOutlined />} className="button-color-remove">删除</Button>
      <Dropdown overlay={menu}>
        <Button className="button-color-cyan">
          更多 <WindowsFilled />
        </Button>
      </Dropdown>
    </Space>
  );
  return (
    <PageContainer>
      <Card>
        <Form layout="inline" form={form}>
          <Form.Item label="订单编号" name="orderCode">
            <Input/>
          </Form.Item>
          <Form.Item label="客户名称" name="memberName">
            <Input/>
          </Form.Item>
          <Form.Item >
            <Button type="primary" htmlType="button" onClick={btnOnClick} icon={<SearchOutlined />}>查询</Button>
          </Form.Item>
        </Form>
      </Card>
      <Card>
        <TestTableComponents showTableBar={true} columns={columns} dataSource={tableData} size="small" bordered={true} btnContent={btnContent}/>
      </Card>
      <ShowContext.Provider  value = {{setShow}}>
        <AddOrUpdate show={show}  title={title}/>
      </ShowContext.Provider>


    </PageContainer>
  );
}

export default TestList;
